import G6 from '@antv/g6'

export const BaseConfig = {
  width: 200,
  height: 36
}

G6.registerNode('treeNode', {
  draw (cfg, group) {
    const { level, name, side, children, collapsed } = cfg;
    const rootNode = level === 0
    const {
      width,
      height
    } = BaseConfig
    const x = 0
    const y = -height / 2
    const keyShapeAttrs = {
      x,
      y,
      width,
      height,
      radius: 4,
      fill: '#f8f6f7',
      cursor: 'pointer'
    }

    const keyShape = group.addShape('rect', { // 节点图形
      attrs: keyShapeAttrs,
      name: "key-shape-rect"
    })

    group.addShape('text', { // 节点label
      attrs: {
        text: name,
        x: width / 2,
        y: 0,
        fontSize: 12,
        fill: '#000',
        textAlign: 'center',
        textBaseline: 'middle'
      },
      name: 'key-shape-label'
    })

    if (children && children.length) { // 子节点按钮
      if (rootNode) { // 根节点要处理2个collapse按钮
        const leftNums = children.reduce((acc, curr) => curr.side === 'left' ? acc+=1 : acc, 0)
        const rightNums = children.length - leftNums
        group.addShape('rect', { // rootNode节点的按钮 左边
          attrs: {
            width: 20,
            height: 15,
            stroke: collapsed ? '#1890ff' : '#5cdbd3',
            fill: collapsed ? '#fff' : '#e6fffb',
            x: -20,
            y: -8,
            radius: 5,
            cursor: 'pointer'
          },
          name: 'root-left-btn-shape'
        })

        group.addShape('text', {
          attrs: {
            text: leftNums,
            x: -10,
            y: 0,
            fontSize: 12,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: '#000',
            cursor: 'pointer'
          },
          name: 'root-left-btn-label'
        })

        group.addShape('rect', { // rootNode节点的按钮 右边
          attrs: {
            width: 20,
            height: 15,
            stroke: collapsed ? '#1890ff' : '#5cdbd3',
            fill: collapsed ? '#fff' : '#e6fffb',
            x: width,
            y: -8,
            radius: 5,
            cursor: 'pointer'
          },
          name: 'root-right-btn-shape'
        })
        group.addShape('text', {
          attrs: {
            text: rightNums,
            x: width + 10,
            y: 0,
            fontSize: 12,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: '#000',
            cursor: 'pointer'
          },
          name: 'root-right-btn-label'
        })
      } else {
        group.addShape('rect', { // 非rootNode节点的按钮
          attrs: {
            width: 20,
            height: 15,
            stroke: collapsed ? '#1890ff' : '#5cdbd3',
            fill: collapsed ? '#fff' : '#e6fffb',
            x: side === 'left' ? -20 : width,
            y: -8,
            radius: 5,
            cursor: 'pointer'
          },
          name: 'child-btn-shape'
        })
        group.addShape('text', {
          attrs: {
            text: children.length,
            x: side === 'left' ? -10 : width + 10,
            y: 0,
            fontSize: 12,
            textAlign: 'center',
            textBaseline: 'middle',
            fill: '#000',
            cursor: 'pointer'
          },
          name: 'child-btn-label'
        })
      }
    }

    return keyShape
  }
})